{% extends "../platformmgr/base.html" %}

{% load admin_utils %}

{% block main_content %}
{% verbatim %}
<div id="deployment-list" style="width: 100%;" class="p20">
    <bk-table :data="data">
        <bk-table-column label="应用">
            <template slot-scope="{ row }">
                <a :href="appDetailUrl(row.f_application_id)">
                    <strong>$[row.f_application_name]</strong>
                    ($[row.f_application_id])
                </a>
            </template>
        </bk-table-column>
        <bk-table-column label="模块" prop="f_module_name"></bk-table-column>
        <bk-table-column label="环境" prop="f_environment"></bk-table-column>
        <bk-table-column label="状态（build/release）">
            <template slot-scope="{ row }">
                <span v-html="renderStatus(row)"></span>
            </template>
        </bk-table-column>
        <bk-table-column label="开始时间">
            <template slot-scope="{ row }">
                <span :title="row.created">$[friendlyTime(row.created)]</span>
            </template>
        </bk-table-column>
        <bk-table-column label="最近更新">
            <template slot-scope="{ row }">
                <span :title="row.updated">$[friendlyTime(row.updated)]</span>
            </template>
        </bk-table-column>
    </bk-table>
    <pagination class="mt15" :current.sync="pagination.curPage" :limit="pagination.limit" :count="pagination.count"
        :align="'right'" />
</div>
{% endverbatim %}
{% endblock %}

{% block main_script %}
<script>
    const pagination = {{ pagination | to_json }}
    const data = {{ deployment_list | to_json }}

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            el: "#deployment-list",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    data,
                    pagination,
                    appBaseUrl: '{% url "admin.applications.detail.overview" "--placeholder--" %}',
                }
            },
            methods: {
                appDetailUrl(code) {
                    return this.appBaseUrl.replace("--placeholder--", code)
                },
                friendlyTime: function (timestamp) {
                    return moment(timestamp).fromNow()
                },
                renderStatus: function (item) {
                    if (item.build_status === item.release_status) {
                        return item.build_status
                    }
                    return `<strong>${item.build_status} / ${item.release_status}</strong>`
                }
            }
        })
    })
</script>
{% endblock %}
